<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" >
	<title>系部统一</title>
	<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../css/reset.css">
	<link rel="stylesheet" type="text/css" href="../css/personnel_training.css">
	<link rel="stylesheet" type="text/css" href="../css/nav.css">
	<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_554626_qzrso3umv1oo5hfr.css">
	<link rel="stylesheet" type="text/css" href="../css/swiper-3.3.1.min.css">
</head>
<body>
	<header>
		<div class='wrap'>
			<div class='left col-xs-12 col-sm-6 col-md-6 col-lg-6'>
				<a href="../index.html"><img src="../img/logo.png"></a>
			</div>
			<div class='right  col-xs-12 col-sm-6 col-md-6 col-lg-6'>
				
			</div>
		</div>
	</header>
	<!-- ======导航======= -->
	<nav class="navbar navbar-default" role="navigation">
	    <div class="container-fluid wrap">
		    <div class="navbar-header">
		        <button type="button" class="navbar-toggle iconfont icon-ai-kind" data-toggle="collapse"
		                data-target="#example-navbar-collapse">
		        </button>
		    </div>
		    <div class="collapse navbar-collapse" id="example-navbar-collapse">
		        <ul class="nav navbar-nav main">
		            <li>
		            	<a href="../index.html">学院首页</a>
		            </li>
		            <li class="active">
		            	<a href="#">系部首页</a>
		            </li>
		            <li>
		                <a href="#">系部概况</a>
		            </li>
		            <li>
		            	<a href="#">师资队伍</a>
		            </li>
		            <li>
		            	<a href="#">教学科研</a>
		            </li>
		            <li>
		            	<a href="#">党建工作</a>
		            </li>
		            <li>
		            	<a href="#">学会工作</a>
		            </li>
		            <li>
		            	<a href="#">招生就业</a>
		            </li>
		            <li>
		            	<a href="#">交流合作</a>
		            </li>
		            <li>
		            	<a href="#">校友之窗</a>
		            </li>
		        </ul>
		        
		    </div>
	    </div>
	</nav>
	<!-- =====导航结束======= -->
	<div id="banner">
		<!-- <a href="#"><img src="./img/banner.jpg"></a> -->
		<div class="swiper-container" id="banner_swiper">
		    <div class="swiper-wrapper">
		        <div class="swiper-slide"><a href="#"><img src="../img/banner.jpg"></a></div>
		        <div class="swiper-slide"><a href="#"><img src="../img/banner.jpg"></a></div>
		        <div class="swiper-slide"><a href="#"><img src="../img/banner.jpg"></a></div>
		    </div>
		    <!-- 如果需要分页器 -->
		    <!-- <div class="swiper-pagination"></div> -->
		</div>
	</div>

	<div id='main'>
		<div class="main_nav">
			<div class='wrap'>
				<ul class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
					<li class='active col-xs-12 col-sm-6 col-md-2 col-lg-2'><a href="#"><i class="iconfont icon-yuandianxiao"></i><span>护理系</span></a></li>
					<li class=' col-xs-12 col-sm-6 col-md-2 col-lg-2'><a href="#"><i class="iconfont icon-yuandianxiao"></i><span>机械系</span></a></li>
					<li class=' col-xs-12 col-sm-6 col-md-2 col-lg-2'><a href="#"><i class="iconfont icon-yuandianxiao"></i><span>建筑工程</span></a></li>
					<li class=' col-xs-12 col-sm-6 col-md-2 col-lg-2'><a href="#"><i class="iconfont icon-yuandianxiao"></i><span>经济管理</span></a></li>
					<li class=' col-xs-12 col-sm-6 col-md-2 col-lg-2'><a href="#"><i class="iconfont icon-yuandianxiao"></i><span>信息工程</span></a></li>
				</ul>
				<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
					<div class="input_box">
						<input type="text" name="" placeholder="站内搜索">
						<i class='iconfont icon-sousuo'></i>
					</div>
				</div>
			</div>
		</div>
		<div class="main_top">
			<div class='wrap'>
				<div class="img_news col-xs-12 col-sm-12 col-md-8 col-lg-8">
					<div class="main_title">
						<i class='square'></i>
						<b>图片新闻</b>
						<i class='square2'></i>
					</div>
					<div class='content'>
						<div class='left col-xs-12 col-sm-12 col-md-6 col-lg-6'>
							<img src="../img/img3.jpg">
						</div>
						<div class="right col-xs-12 col-sm-12 col-md-6 col-lg-6">
							<div class='right_title'><a href="#">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</a></div>
							<div class='right_content'>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
							<a href="#" class='right_btn'>查看更多</a>
						</div>
						<ul class="bottom col-xs-12 col-sm-12 col-md-12 col-lg-12">
							<li class=" col-xs-12 col-sm-12 col-md-6 col-lg-6"><a href="#">标题标题标题标题标题标题标题标题标题标题标题标题</a></li>
							<li class=" col-xs-12 col-sm-12 col-md-6 col-lg-6"><a href="#">标题标题标题标题标题标题标题标题标题标题标题标题</a></li>
							<li class=" col-xs-12 col-sm-12 col-md-6 col-lg-6"><a href="#">标题标题标题标题标题标题标题标题标题标题标题标题</a></li>
							<li class=" col-xs-12 col-sm-12 col-md-6 col-lg-6"><a href="#">标题标题标题标题标题标题标题标题标题标题标题标题</a></li>
							<li class=" col-xs-12 col-sm-12 col-md-6 col-lg-6"><a href="#">标题标题标题标题标题标题标题标题标题标题标题标题</a></li>
							<li class=" col-xs-12 col-sm-12 col-md-6 col-lg-6"><a href="#">标题标题标题标题标题标题标题标题标题标题标题标题</a></li>
						</ul>
					</div>
				</div>
				<div class="news_nav col-xs-12 col-sm-12 col-md-4 col-lg-4">
					<div class="title news_nav_title">
						<div class="left active news_nav_btn news_title_btn"> 
							<span>咨讯导航</span>
						</div>
						<div class='center'>
							<i></i>
						</div>
						<div class="right data_download_btn news_title_btn">
							<span>资料下载</span>
						</div>
					</div>
					<div class='news_nav_box'>
						<a class="#"><span>录取查询</span><i>/ Admission query</i></a>
						<a class="#"><span>学生成绩查询</span><i>/ Result query</i></a>
						<a class="#"><span>普通话考试</span><i>/ Mandarin test</i></a>
						<a class="#"><span>系主任信箱</span><i>/ Dean’s mailbox</i></a>
					</div>
					<div class='data_download_box'>
						<a href="#">标题标题标题标题标题标题标题标题标题标题标题标题</a>
						<a href="#">标题标题标题标题标题标题标题标题标题标题标题标题</a>
						<a href="#">标题标题标题标题标题标题标题标题标题标题标题标题</a>
						<a href="#">标题标题标题标题标题标题标题标题标题标题标题标题</a>
						<a href="#">标题标题标题标题标题标题标题标题标题标题标题标题</a>
						<a href="#">标题标题标题标题标题标题标题标题标题标题标题标题</a>
						<a href="#">标题标题标题标题标题标题标题标题标题标题标题标题</a>
						<a href="#">标题标题标题标题标题标题标题标题标题标题标题标题</a>
						<a href="#">标题标题标题标题标题标题标题标题标题标题标题标题</a>
						<a href="#" class=more><i class='iconfont icon-yousanjiao'></i><span>more</span></a>

					</div>
				</div>
			</div>
		</div>
		<div class="main_center">
			<div class='wrap'>
				<div class='dynamic main_center_box col-xs-12 col-sm-12 col-md-4 col-lg-4'>
					<div class="title_top">
						<i class='white'></i>
						<span class="left">系部动态 / Dynamic</span>
						<span class="right">More<i class="iconfont icon-yousanjiao"></i></span>
					</div>
					<div class="content">
						<i class="square"></i>
						<div class="top">
							<img src="../img/img4.jpg">
						</div>
						<div class="bottom">
							<div class="title"><a href="#">护理系召开期末复习迎考动员即结婚额外阿斯i较为i而我护理系召开期末复习迎考动员即结婚额外阿斯i较为i而我</a></div>
							<ul>
								<li><a href="#"><i class="iconfont icon-yuandianxiao"></i><span>护理系召开期末复习迎考动员即阶段性总结护理系召开期末复习迎考动员即阶段性总结</span></a></li>
								<li><a href="#"><i class="iconfont icon-yuandianxiao"></i><span>护理系召开期末复习迎考动员即阶段性总结护理系召开期末复习迎考动员即阶段性总结</span></a></li>
								<li><a href="#"><i class="iconfont icon-yuandianxiao"></i><span>护理系召开期末复习迎考动员即阶段性总结护理系召开期末复习迎考动员即阶段性总结</span></a></li>
							</ul>
						</div>
					</div>
				</div>
				<div class='dynamic main_center_box col-xs-12 col-sm-12 col-md-4 col-lg-4'>
					<div class="title_top">
						<i class='white'></i>
						<span class="left">科学研究 / Science</span>
						<span class="right">More<i class="iconfont icon-yousanjiao"></i></span>
					</div>
					<div class="content">
						<i class="square"></i>
						<div class="top">
							<img src="../img/img4.jpg">
						</div>
						<div class="bottom">
							<div class="title"><a href="#">护理系召开期末复习迎考动员即结婚额外阿斯i较为i而我护理系召开期末复习迎考动员即结婚额外阿斯i较为i而我</a></div>
							<ul>
								<li><a href="#"><i class="iconfont icon-yuandianxiao"></i><span>护理系召开期末复习迎考动员即阶段性总结护理系召开期末复习迎考动员即阶段性总结</span></a></li>
								<li><a href="#"><i class="iconfont icon-yuandianxiao"></i><span>护理系召开期末复习迎考动员即阶段性总结护理系召开期末复习迎考动员即阶段性总结</span></a></li>
								<li><a href="#"><i class="iconfont icon-yuandianxiao"></i><span>护理系召开期末复习迎考动员即阶段性总结护理系召开期末复习迎考动员即阶段性总结</span></a></li>
							</ul>
						</div>
					</div>
				</div>
				<div class='work col-xs-12 col-sm-12 col-md-4 col-lg-4'>
					<div class="title_top">
						<span class="active">教学工作</span>
						<span>学生工作</span>
					</div>
					<div class="content work_list1">
						<ul>
							<li><a href="#"><span>教学工作教学工作教学工作教学工作</span></a></li>
							<li><a href="#"><span>护理系召开期末复习迎考动员即阶段性总结护理系召开期末复习迎考动员即阶段性总结</span></a></li>
							<li><a href="#"><span>护理系召开期末复习迎考动员即阶段性总结护理系召开期末复习迎考动员即阶段性总结</span></a></li>
							<li><a href="#"><span>护理系召开期末复习迎考动员即阶段性总结护理系召开期末复习迎考动员即阶段性总结</span></a></li>
							<li><a href="#"><span>护理系召开期末复习迎考动员即阶段性总结护理系召开期末复习迎考动员即阶段性总结</span></a></li>
						</ul>
						<div class="img_box">
							<img src="../img/img4.jpg">
						</div>
					</div>
					<div class="content work_list2">
						<ul>
							<li><a href="#"><span>学生工作学生工作学生工作学生工作</span></a></li>
							<li><a href="#"><span>护理系召开期末复习迎考动员即阶段性总结护理系召开期末复习迎考动员即阶段性总结</span></a></li>
							<li><a href="#"><span>护理系召开期末复习迎考动员即阶段性总结护理系召开期末复习迎考动员即阶段性总结</span></a></li>
							<li><a href="#"><span>护理系召开期末复习迎考动员即阶段性总结护理系召开期末复习迎考动员即阶段性总结</span></a></li>
							<li><a href="#"><span>护理系召开期末复习迎考动员即阶段性总结护理系召开期末复习迎考动员即阶段性总结</span></a></li>
						</ul>
						<div class="img_box">
							<img src="../img/img4.jpg">
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="main_bottom">
			<div class='wrap'>
				<div class='left col-xs-12 col-sm-12 col-md-6 col-lg-6'>
					<div class="swiper-container" id="bottom_swiper">
					    <div class="swiper-wrapper">
					        <div class="swiper-slide">
								<li>
									<div class='left'>
										<span>11</span>
										<span>2017-12</span>
									</div>
									<div class='right'><a href="#">川省2017年普通高校招生美术与设计类专业考试成绩录取控制分数线及部分艺术类专制分数线及部分艺术类专</a></div>
								</li>
					        </div>
					    </div>
					</div>
				</div>
				<div class='right col-xs-12 col-sm-12 col-md-6 col-lg-6'>
					<!-- <input id="myCar" list="link" placeholder="选择相关链接" />
					<datalist id="link">
						<option value="相关链接">
						<option value="相关链接">
						<option value="相关链接">
					</datalist> -->
					<div class='right_link col-xs-12 col-sm-12 col-md-6 col-lg-6'>
						<div class="link">
							<span>相关链接</span>
							<i class="iconfont icon-jiantousanjiaoxia"></i>
							<ul>
								<li><a href="#">相关链接</a></li>
								<li><a href="#">相关链接</a></li>
								<li><a href="#">相关链接</a></li>
								<li><a href="#">相关链接</a></li>
							</ul>
						</div>
					</div>
					<div class='right_link col-xs-12 col-sm-12 col-md-6 col-lg-6'>
						<div class="link">
							<span>相关链接</span>
							<i class="iconfont icon-jiantousanjiaoxia"></i>
							<ul>
								<li><a href="#">相关链接</a></li>
								<li><a href="#">相关链接</a></li>
								<li><a href="#">相关链接</a></li>
								<li><a href="#">相关链接</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div id="footer">
		<div class="footer_top">
			<div class="wrap">
				<ul class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
					<li>地址：四川省泸州市合江荔城大道500号</li>
					<li>邮编：646200 </li>
					<li>联系电话：0830-5261151、5255263、5255327 </li>
					<li>传真： 0830-8889199 </li>
					<li>QQ：800099668   微信：V800</li>
				</ul>
				<div class='img_box col-xs-12 col-sm-12 col-md-4 col-lg-4'>
					<img src="../img/img2.jpg">
				</div>
			</div>
		</div>
		<div class="footer_bottom">
			Copyright&copy; 四川三河职业学院官方网站
		</div>
	</div>
	


</body>
<script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/swiper-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
	if($(window).width() < 769){
		$('.dropdown ul').addClass('dropdown-menu').removeClass('drop').removeClass('menu5');
	}else{
		$('.dropdown ul').removeClass('dropdown-menu').addClass('drop').addClass('menu5');
	}
	$(window).resize(function(){ 
	    if($(window).width() < 769){
			$('.dropdown ul').addClass('dropdown-menu').removeClass('drop').removeClass('menu5');
		}else{
			$('.dropdown ul').removeClass('dropdown-menu').addClass('drop').addClass('menu5');
		}
	});

	var mySwiper1 = new Swiper ('#banner .swiper-container', {
	    direction: 'horizontal',
	    loop: true,
	    autoplay: 500,
        speed: 2000,
        observer:true,
        observeParents:true,
	    pagination: {
	      el: '.swiper-pagination',
	    },
	}) 
	var mySwiper2 = new Swiper ('.main_bottom .swiper-container', {
	    direction: 'vertical',
	    loop: true,
	    slidesPerView:1,
	    spaceBetween : 60,
        autoplay: 1000,
        speed: 2000,
        observer:true,
        observeParents:true,
        autoplayDisableOnInteraction : false,
	    pagination: {
	      el: '.swiper-pagination',
	      clickable: true,
	    },
	}) 
	$('.news_title_btn').click(function(){
		if($(this).hasClass('news_nav_btn')){
			$('.news_nav_box').show();
			$('.data_download_box').hide();
		}else{
			$('.news_nav_box').hide();
			$('.data_download_box').show();
		}
		$(this).addClass('active').siblings('.news_title_btn').removeClass('active');
	})
	$('.title_top span').click(function(){
		console.log($(this).index());
		$(this).addClass('active').siblings().removeClass('active');
		if($(this).index()==0){
			$('.work_list1').show();
			$('.work_list2').hide();
		}else{
			$('.work_list1').hide();
			$('.work_list2').show();
		}
	})
	
	$('.right_link').click(function(){
		console.log("465464546");
		var listBox = $(this).find('ul');
		if(listBox.css('display')=='block'){
			listBox.hide();
		}else{
			listBox.show();
		}
		$(this).siblings().find('ul').hide();
	})
	

	
})
</script>
</html>